<template>
    <el-row>
        <el-row>
            <span>订单号：{{orderDetail.orderid}}</span>
            <span style="margin-left:10px">下单时间：{{format(orderDetail.created_at)}}</span>
        </el-row>
        <el-row style="border:1px solid #eee;margin:16px 0 24px 0">
            <el-col :span="7" style="padding:16px;border-right:1px solid #eee;min-height:130px">
                <div>
                    <el-row style="font-size:14px;font-weight:600">{{orderDetail.pay_status == 0 ? "待付款":orderDetail.status==0?"等待商家发货":orderDetail.status==1?"已发货":orderDetail.status==2?"已完成":orderDetail.status==3?"已评价":orderDetail.status==4?"退款完成":orderDetail.status==5?"售后完成":orderDetail.status==-1?"已关闭":orderDetail.status==-2?"退款中":"售后中"}}</el-row>
                    <el-row style="font-size:12px;margin:10px 0" v-if="orderDetail.status==0 && orderDetail.pay_status == 1">买家已付款至结算账户，请尽快发货，否则买家有权申请退款</el-row>
                    <el-button size="mini" @click="fahuo" v-if="orderDetail.status==0&&(orderDetail.pay_status == 1 || orderDetail.payment_id == 3)">发货</el-button>
                </div>
            </el-col>
            <el-col :span="17" style="padding:16px 30px;" v-if="orderDetail.status != -1">
                <el-steps finish-status="success" simple>
                    <el-step title="买家下单"></el-step>
                    <el-step title="买家付款"></el-step>
                    <el-step title="商家发货"></el-step>
                    <el-step title="交易完成"></el-step>
                </el-steps>
                <el-row style="font-size:14px;text-align:center;margin-top:16px">
                    <el-col :span="6" style="padding:0 10px">{{format(orderDetail.created_at)}}</el-col>
                    <el-col :span="6" style="padding:0 10px">{{format(orderDetail.pay_time)}}</el-col>
                    <el-col :span="6" style="padding:0 10px">{{format(orderDetail.send_time)}}</el-col>
                    <el-col :span="6" style="padding:0 10px">{{format(orderDetail.finsh_time)}}</el-col>
                </el-row>
            </el-col>
            <el-col :span="24" style="border-top:1px solid #eee;padding:16px;font-size:12px">
                商家备注：{{orderDetail.remark}}
            </el-col>
        </el-row>

        <el-row style="padding:16px;background:#f8f8f8;font-size:14px">
            <el-col :span="6">
                <h5 style="margin-bottom:10px">收货人信息</h5>
                <el-row>收货人姓名：{{orderDetail.contact.name}}</el-row>
                <el-row>联系电话：{{orderDetail.contact.phone}}</el-row>
                <el-row>收货地址：{{orderDetail.contact.address}}</el-row>
            </el-col>
            <el-col :span="6">
                <h5 style="margin-bottom:10px">配送信息</h5>
                <el-row>快递方式：{{orderDetail.kuaidi.delivery_name}}</el-row>
                <el-row>快递单号：{{orderDetail.kuaidi.tracking_number}}</el-row>
            </el-col>
            <el-col :span="6">
                <h5 style="margin-bottom:10px">付款信息</h5>
                <el-row>实付金额：{{orderDetail.totalprice}}</el-row>
                <el-row>支付方式：{{orderDetail.payment_id == 0 ? '余额' : orderDetail.payment_id == 1 ? "微信支付" : orderDetail.payment_id == 2 ? '支付宝支付' : '货到付款'}}</el-row>
                <el-row>付款时间：{{format(orderDetail.pay_time)}}</el-row>
            </el-col>
            <el-col :span="6">
                <h5 style="margin-bottom:10px">买家信息</h5>
                <el-row>买家：{{orderDetail.user.nickName || '匿名用户'}}</el-row>
                <el-row>买家留言：{{orderDetail.remark}}</el-row>
            </el-col>
        </el-row>

        <el-table :data="orderDetail.detail" stripe style="margin:24px 0">
            <el-table-column label="商品" width="260">
                <template slot-scope="scope">
                    <div style="display:flex">
                        <img :src="scope.row.product.img_url" alt="" style="width:80px;height:80px">
                        <div style="flex:1;padding:2px 7px">
                            <div class="text_overflow text_overflow_line_2">{{scope.row.name}}</div>
                        </div>
                    </div>
                    <!-- <div v-if="scope.row.remark">商品留言：{{scope.row.remark}}</div> -->
                </template>
            </el-table-column>
            <el-table-column label="单价(元)/数量" header-align="center" align="center">
                <template slot-scope="scope">
                    <div>¥{{scope.row.price}}</div>
                    <div>{{scope.row.num}}{{scope.row.product.unit}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="小计（元）" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="pay_status" label="支付状态" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-row style="font-weight:700" :style="{color:orderDetail.pay_status==1?'#19be6b':'#f50'}">{{orderDetail.pay_status == 0 ? "未支付":"已支付"}}</el-row>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-row style="font-weight:700" :style="{color:orderDetail.status==2?'#19be6b':'#f50'}">{{orderDetail.status==0?"待发货":orderDetail.status==1?"已发货":orderDetail.status==2?"已完成":orderDetail.status==3?"已评价":orderDetail.status==4?"退款完成":orderDetail.status==5?"售后完成":"已关闭"}}</el-row>
                </template>
            </el-table-column>
            <el-table-column prop="check" label="售后状态" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-row style="font-weight:700" :style="{color:orderDetail.check==2?'#19be6b':'#f50'}">{{orderDetail.check==1?"审核通过":orderDetail.check==-1?"审核失败":orderDetail.check==2?"售后审核中":orderDetail.check==3?"退款审核中":"-"}}</el-row>
                </template>
            </el-table-column>
        </el-table>
        <el-row style="margin-bottom:60px">
            <el-col :span="3" :offset="19">
                <el-row>商品总价</el-row>
                <el-row>运费</el-row>
                <el-row>优惠</el-row>
                <el-row style="margin-top:10px;font-weight:600">订单金额：</el-row>
            </el-col>
            <el-col :span="2">
                <el-row>¥ {{orderDetail.totalprice_org}}</el-row>
                <el-row>¥ {{orderDetail.verify.fee_price}}</el-row>
                <el-row>¥ {{orderDetail.verify.full_price + orderDetail.verify.coupon_price}}</el-row>
                <el-row style="margin-top:10px;color:#f50">¥ {{orderDetail.totalprice}}</el-row>
            </el-col>
        </el-row>

        <el-dialog title="商品发货" :visible.sync="fahuoModal">
            <el-form>
                <el-form-item label="物流公司">
                    <el-select v-model="delivery_id">
                        <el-option v-for="(item,index) in kuaidiData" :key="index" :label="item.delivery_name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物流单号">
                    <el-input v-model="code" placeholder="请输入物流单号" style="width:300px"></el-input>
                </el-form-item>
            </el-form>
            <p slot="footer">
                <el-button type="primary" size="mini" @click="fahuoBtn">发货</el-button>
            </p>
        </el-dialog>
    </el-row>
</template>

<script>
export default {
    layout: "shop",
    data() {
        return {
            orderDetail: {},
            active: 0,
            order_id: 0,
            kuaidiData: [],
            fahuoModal: false,
            delivery_id: "",
            code: "" //快递单号
        };
    },
    async asyncData({ app, query }) {
        let data = {};
        data.order_id = query.id;
        //订单详情
        const order = await app.$axios.$get(
            `/api/shop/home/shop/order/index/detail?id=${query.id}`
        );
        if (order && order.errmsg === "ok") {
            data.orderDetail = order.data;
        }
        //快递列表
        const kuaidi = await app.$axios.$get(
            `/api/shop/home/shop/plugin/kuaidi/shopAll`
        );
        if (kuaidi && kuaidi.errmsg === "ok") {
            data.kuaidiData = kuaidi.data;
        }
        return data;
    },
    methods: {
        async getDetail() {
            const order = await this.$axios.$get(
                `/api/shop/home/shop/order/index/detail?id=${this.order_id}`
            );
            if (order && order.errmsg === "ok") {
                this.orderDetail = order.data;
            }
        },
        //发货
        fahuo() {
            this.fahuoModal = true;
        },
        async fahuoBtn() {
            // if (!this.delivery_id) {
            //     this.$message.warning("请选择物流公司");
            //     return;
            // }
            // if (!this.code) {
            //     this.$message.warning("请输入物流单号");
            //     return;
            // }
            const res = await this.$axios.$get(
                `/api/shop/home/shop/order/index/update?id=${
                    this.order_id
                }&status=1&delivery_id=${this.delivery_id}&code=${this.code}`
            );
            if (res && res.errmsg === "ok") {
                this.$message.success("已发货");
                this.fahuoModal = false;
                this.getDetail();
            }
        }
    }
};
</script>

<style>
.el-step.is-simple .el-step__title {
    font-size: 12px;
    color: #222;
}
</style>
